<template>
  <v-chart ref="chart" class="chart" :option="option" />
</template>

<script>
export default {
  name: 'TreeChart',
  props: ['rData'],
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            lineStyle: {
              // curveness: 0,
              // color: '#000'
            },
            initialTreeDepth: 2, // 默认展开深度层数
            data: [{
              'name': '科创中国',
              'children': [
                {
                  'name': '四川',
                  lineStyle: {
                    color: '#0361C7',
                    curveness: 0
                  },
                  itemStyle: {
                    color: '#0361C7'
                  },
                  'children': [
                    {
                      lineStyle: {
                        color: '#0361C7',
                        curveness: 0.5
                      },
                      'name': 'xxx院士'
                    },
                    {
                      lineStyle: {
                        color: '#0361C7',
                        curveness: 0.5
                      },
                      'name': 'xxx院士'
                    },
                    {
                      lineStyle: {
                        color: '#0361C7',
                        curveness: 0.5
                      },
                      'name': 'xxx院士'
                    }
                  ]
                },
                {
                  'name': '重庆',
                  lineStyle: {
                    color: '#E1A36B',
                    curveness: 0
                  },
                  itemStyle: {
                    color: '#E1A36B'
                  },
                  'children': [
                    {
                      lineStyle: {
                        color: '#E1A36B',
                        curveness: 0.5
                      },
                      'name': 'xxx院士'
                    },
                    {
                      lineStyle: {
                        color: '#E1A36B',
                        curveness: 0.5
                      },
                      'name': 'xxx院士'
                    },
                    {
                      lineStyle: {
                        color: '#E1A36B',
                        curveness: 0.5
                      },
                      'name': 'xxx院士'
                    }
                  ]
                },
                {
                  'name': '上海',
                  lineStyle: {
                    color: '#6CDDCC',
                    curveness: 0
                  },
                  itemStyle: {
                    color: '#6CDDCC'
                  },
                  'children': [
                    {
                      lineStyle: {
                        color: '#6CDDCC',
                        curveness: 0.5
                      },
                      'name': 'xxx院士'
                    },
                    {
                      lineStyle: {
                        color: '#6CDDCC',
                        curveness: 0.5
                      },
                      'name': 'xxx院士'
                    },
                    {
                      lineStyle: {
                        color: '#6CDDCC',
                        curveness: 0.5
                      },
                      'name': 'xxx院士'
                    },
                    {
                      lineStyle: {
                        color: '#6CDDCC',
                        curveness: 0.5
                      },
                      'name': 'xxx院士'
                    },
                    {
                      lineStyle: {
                        color: '#6CDDCC',
                        curveness: 0.5
                      },
                      'name': 'xxx院士'
                    }
                  ]
                }
              ]
            }
            ],

            top: '1%',
            left: '15%',
            bottom: '1%',
            right: '20%',

            symbolSize: 7,

            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 12
            },

            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },

            emphasis: {
              focus: 'descendant'
            },

            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      }
    }
  },
  methods: {
    resize() {
      this.$refs['chart'].resize()
    }
  }
}
</script>

<style>

</style>
